<template>
  <view class="page">
    <u-navbar bg-color="#EFF4FF" :placeholder="true" :fixed="true" :border="false" @leftClick="open = !open"
      @rightClick="toMessage">
      <template #left>
        <u-text :suffixIcon="open ? 'arrow-up-fill' : 'arrow-down-fill'" iconStyle="margin-left: 10rpx" align="center"
          :text="studentValue.name" size="32rpx" color="#333"></u-text>
      </template>
      <template #right>
        <image src="/static/image/teacher/icon-index-bell.png" mode="aspectFit" style="width: 40rpx; height: 40rpx">
        </image>
      </template>
    </u-navbar>
    <!-- 主内容区域 -->
    <view class="main bg-grey" style="border-radius: 30rpx 30rpx 0 0;">
      <!-- 学员出勤实时数据 -->
      <view @click="toRealTimeData">
        <view class="flex align-center gap-sm">
          <u-icon name="/static/image/principal/icon-attendance-data.png" size="42rpx"></u-icon>
          <u-text bold size="36rpx" color="#333" text="学员出勤实时数据"></u-text>
        </view>
        <view class="grid-box">
          <view class="grid-item">
            <u-text align="center" bold text="100" size="42rpx" color="#333"></u-text>
            <u-text align="center" text="应到学员" size="28rpx" color="#333"></u-text>
          </view>
          <view class="grid-item">
            <u-text align="center" bold text="100" size="42rpx" color="#333"></u-text>
            <u-text align="center" text="实到学员" size="28rpx" color="#333"></u-text>
          </view>
          <view class="grid-item">
            <u-text align="center" bold text="100" size="42rpx" color="#333"></u-text>
            <u-text align="center" text="未到学员" size="28rpx" color="#333"></u-text>
          </view>
        </view>
      </view>

      <!-- 每日数据 -->
      <view class="flex align-center gap-sm margin-top-xl">
        <view class="flex align-center gap-sm flex-1">
          <u-icon name="/static/image/principal/icon-index-daily-data.png" size="42rpx"></u-icon>
          <u-text bold size="36rpx" color="#333" text="每日数据"></u-text>
        </view>
        <view class="flex align-center gap-sm">
          <!-- <u-icon name="/static/image/principal/icon-index-calendar.png" size="40rpx"></u-icon> -->
          <u-text size="28rpx" color="#333" text="2025-10-30"></u-text>
          <u-icon name="arrow-down-fill" size="24rpx" color="#333"></u-icon>
        </view>
      </view>
      <Card class="margin-top" @click="toDutyTotal">
        <view class="flex align-center justify-between">
          <text class="line"></text>
          <u-text bold text="学员出勤统计" size="30rpx" color="#333"></u-text>
          <u-text align="right" text="学员总人次：100" size="24rpx" color="#666"></u-text>
        </view>
        <view class="flex align-center justify-between margin-top">
          <view>
            <u-text align="center" bold text="30" size="42rpx" color="#333"></u-text>
            <u-text text="应到人次" size="28rpx" color="#999"></u-text>
          </view>
          <view style="color:#c0c0c0">|</view>
          <view>
            <u-text align="center" bold text="100" size="42rpx" color="#333"></u-text>
            <u-text text="实到人次" size="28rpx" color="#999"></u-text>
          </view>
          <view style="color:#c0c0c0">|</view>
          <view>
            <u-text align="center" bold text="100" size="42rpx" color="#333"></u-text>
            <u-text text="未到人次" size="28rpx" color="#999"></u-text>
          </view>
        </view>
      </Card>
      <Card class="margin-top" @click="toWorkTotal">
        <view class="flex align-center justify-between">
          <text class="line"></text>
          <u-text bold text="教师工作统计" size="30rpx" color="#333"></u-text>
          <u-text align="right" text="教师总人次：100" size="24rpx" color="#666"></u-text>
        </view>
        <view class="flex align-center justify-between margin-top">
          <view>
            <u-text align="center" bold text="30" size="42rpx" color="#333"></u-text>
            <u-text text="上传作业" size="28rpx" color="#999"></u-text>
          </view>
          <view style="color:#c0c0c0">|</view>
          <view>
            <u-text align="center" bold text="100" size="42rpx" color="#333"></u-text>
            <u-text text="上传错题" size="28rpx" color="#999"></u-text>
          </view>
          <view style="color:#c0c0c0">|</view>
          <view>
            <view>
              <text class="text-xxl text-bold">18</text>
              <text class="text-lg text-muted text-bold">/20</text>
            </view>
            <u-text text="生成日报" size="28rpx" color="#999"></u-text>
          </view>
        </view>
        <view class="flex align-center justify-between margin-top-lg">
          <view>
            <view>
              <text class="text-xxl text-bold">18</text>
              <text class="text-lg text-muted text-bold">/20</text>
            </view>
            <u-text text="错题讲解" size="28rpx" color="#999"></u-text>
          </view>
          <view style="color:#c0c0c0">|</view>
          <view>
            <view>
              <text class="text-xxl text-bold">18</text>
              <text class="text-lg text-muted text-bold">/20</text>
            </view>
            <u-text text="答案提交" size="28rpx" color="#999"></u-text>
          </view>
          <view style="color:#c0c0c0">|</view>
          <view>
            <view>
              <text class="text-xxl text-bold">18</text>
              <text class="text-lg text-muted text-bold">/20</text>
            </view>
            <u-text text="生成周报" size="28rpx" color="#999"></u-text>
          </view>
        </view>
      </Card>
      <!-- 待办、督办 -->
      <view class="bottom-block">
        <view class="tabs" :class="currentTab === 'pending' ? 'daily-active' : 'weekly-active'">
          <view class="tab-item" :class="currentTab === 'pending' ? 'active' : ''" @click="changeTab('pending')">待办
          </view>
          <view class="tab-item" :class="currentTab === 'supervise' ? 'active' : ''" @click="changeTab('supervise')">督办
          </view>
          <view class="more" @click="toEvent">
            <u-text suffixIcon="arrow-right" iconStyle="color:#9FA2A7;font-size:24rpx" text="查看更多" size="24rpx"
              color="#9FA2A7" align="right" margin="0 0 40rpx 0"></u-text>
          </view>
        </view>
        <!-- 待办 -->
        <view class="tab-content" v-if="currentTab === 'pending'">
          <TeacherEventItem :type="1" :eventList="pendingList" />
        </view>
        <!-- 周报 -->
        <view class="tab-content" v-if="currentTab === 'supervise'">
          <TeacherEventItem :type="2" :eventList="superviseList" />
        </view>
      </view>
      <!-- 校区列表 -->
      <PopupBox bgColor="linear-gradient(180deg, #EFF4FF 10%, #FFFFFF 100%)" :show="open" :top="140"
        @close="open = false">
        <view class="student-item" v-for="item in studentList" :key="item.value"
          @click.stop.prevent="changeStudent(item)">
          <u-text :text="item.name" color="#333" size="32rpx"></u-text>
          <u-icon size="32rpx" name="checkmark" v-if="studentValue.value === item.value"></u-icon>
        </view>
      </PopupBox>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import TeacherEventItem from '@/components/TeacherEventItem/index.vue';
import PopupBox from '@/components/PopupBox/index.vue';
import Card from '@/components/Card/index.vue';
const open = ref(false); //打开学生下拉框
const studentValue = ref({ name: '北大校区', value: '1' }); //学生下拉框选中的值
const currentTab = ref('pending'); //当前选中的tab
const studentList = ref([
  { name: '北大校区', value: '1' },
  { name: '西城校区', value: '2' }
]);

// 待办
const pendingList = ref([
  {
    title: '作业',
    type: 1,
    content: '张三作业条已提交，请及时上传张三作业',
    time: '2025-09-20 10:00'
  },
  {
    title: '报告',
    type: 2,
    content: '张三报告已提交，请及时查看张三报告',
    time: '2025-09-20 10:00'
  }
]);

// 督办
const superviseList = ref([
  {
    title: '作业',
    type: 1,
    content: '张三作业条已提交，请及时上传张三作业',
    time: '2025-09-20 10:00',
    isHandle: false
  },
  {
    title: '报告',
    type: 2,
    content: '张三报告已提交，请及时查看张三报告',
    time: '2025-09-20 10:00',
    isHandle: true
  }
]);

//实时出勤数据
const toRealTimeData = () => {
  uni.navigateTo({
    url: '/pages/principal/index/realTimeData'
  });
};

//每日数据
const toDutyTotal = () => {
  console.log('学员出勤统计');
  uni.navigateTo({
    url: '/pages/principal/index/dutyTotal'
  });
};

//工作统计
const toWorkTotal = () => {
  console.log('工作统计');
  uni.navigateTo({
    url: '/pages/principal/index/workTotal'
  });
};
const changeStudent = (value) => {
  studentValue.value = value;
  open.value = false;
};
const changeTab = (tab) => {
  currentTab.value = tab;
};

// 我的消息
const toMessage = () => {
  uni.navigateTo({
    url: '/pages/teacher/message/index'
  });
};

// 待办督办
const toEvent = () => {
  if (currentTab.value === 'pending') {
    uni.navigateTo({
      url: '/pages/teacher/event/pending',
    });
  } else {
    uni.navigateTo({
      url: '/pages/teacher/event/supervise',
    });
  }
};

onShow(() => {
  for (let i = 0; i < 9; i++) {
    uni.setTabBarItem({
      index: i,
      visible: i > 5 ? true : false,
    });
  }
  uni.setTabBarStyle({
    selectedColor: '#0060E6',
    color: '#999999',
  });
});
</script>

<style lang="scss" scoped>
.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
}

.grid-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  margin-top: 32rpx;

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;

    &:nth-child(1) {
      background: url('/static/image/principal/bg-index-yd.png') no-repeat center center / 100% 100%;
    }

    &:nth-child(2) {
      background: url('/static/image/principal/bg-index-sd.png') no-repeat center center / 100% 100%;
    }

    &:nth-child(3) {
      background: url('/static/image/principal/bg-index-wd.png') no-repeat center center / 100% 100%;
    }
  }
}

.line {
  width: 6rpx;
  height: 26rpx;
  background: #0060E6;
  border-radius: 2rpx;
  margin-right: 10rpx;
}

.bottom-block {
  margin: 36rpx 0;
  border-radius: 32rpx;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .tabs {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-top: 40rpx 30rpx 0 0;
    background: #ebf3ff;
    border-radius: 32rpx 32rpx 0 0;
    margin-top: 16rpx;
    height: 140rpx;
    position: relative;
    background: url('/static/image/teacher/bg-index-event.png') no-repeat center center / 100% 100%;

    &.daily-active:after {
      content: '';
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 156rpx;
      top: -10rpx;
      left: 0;
      background: url('/static/image/tab-active.png') no-repeat top left / 100% 100%;
      z-index: 1;
    }

    &.weekly-active:after {
      content: '';
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 100%;
      height: 156rpx;
      top: -10rpx;
      left: 0;
      background: url('/static/image/tab-active_1.png') no-repeat top left / 100% 100%;
      z-index: 1;
    }

    .tab-item {
      box-sizing: border-box;
      // padding: 0rpx 50rpx 30rpx 50rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666666;
      font-weight: 500;
      z-index: 2;
      width: 174rpx;
      height: 140rpx;
      line-height: 120rpx;

      &.active {
        color: #333;
        font-weight: bold;
      }
    }
  }

  .tab-content {
    background: white;
    flex: 1;
    padding: 0 30rpx 30rpx 30rpx;

    .time-range {
      background: #fff9f0;
      padding: 24rpx;
      border-radius: 20rpx;
    }

    .knowledge-list {
      background: #fff9f0;
      padding: 24rpx;
      margin-top: 24rpx;
      border-radius: 20rpx;
    }
  }
}

.exercise-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  border-radius: 32rpx;
  background: #F8F9FD;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}

.subject-box {
  padding: 32rpx;

  .subject-list {
    .subject-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx;
      border-bottom: 1rpx solid #e0e2e5;

      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.more {
  flex: 1;
  margin-right: 20rpx;
  position: relative;
  z-index: 99;
  height: 100%;
  line-height: 120rpx
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
</style>
